<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0 auto;
        }

        #outer {
            width: 520px;
            height: 280px;
            overflow: hidden;
            position: relative;
        }

        #inner {
            width: 3120px;
            height: 280px;
            position: absolute;
        }

        ul {
            width: 3120px;
            list-style: none;
            padding: 0px;
            height: 280px;
        }

        ul li {
            float: left;
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        <ul>
            <li><img src="a.jpg"/></li>
            <li><img src="b.png"/></li>
            <li><img src="c.jpg"/></li>
            <li><img src="d.jpg"/></li>
            <li><img src="e.png"/></li>
            <li><img src="a.jpg"/></li>
        </ul>
    </div>
</div>

<script>
    left = 0;

    t = setInterval(function () {
        left = left - 10;
        if (left <= -2600) {
            left = 0;
        }
        if (left % 520 == 0) {

            clearInterval(t);
            setTimeout(function () {
                abc();
            }, 2000);
        }
        document.getElementById("inner").style.left = left + "px";
    }, 100);

    function abc() {
        t = setInterval(function () {
            left = left - 10;
            if (left <= -2600) {
                left = 0;
            }
            if (left % 520 == 0) {
                console.log(left);
                clearInterval(t);
                setTimeout(function () {
                    abc();
                }, 2000);
            }
            document.getElementById("inner").style.left = left + "px";
        }, 100)

    }
</script>
</body>
</html>